<html>
<head>
    <link rel="icon" type="image/png" href="webrtc.png" />
    <script src="libs/tfjs"></script>
    <script src="libs/tf-backend-wasm.js"></script>    
    <script>
        tf.setBackend('wasm').then(() => main());
    </script>
    <script src="libs/coco-ssd"> </script>
    <script src="libs/posenet"> </script>
    <script src="libs/deeplab"> </script>
    <script src="libs/body-pix"></script>
    <script src="libs/blazeface"></script>
    <script type="module" src="webrtc-streamer-element.js"></script>
    <script type="module" src="webrtc-streamer-footer-element.js"></script>
    <script type="module" src="webrtc-streamer-menu-element.js"></script>
    <script type="module" src="webrtc-streamer-options-element.js"></script>
    <script type="module" src="webrtc-streamer-algo-element.js"></script>
</head>
<body>
    <webrtc-streamer-menu id="selector" ></webrtc-streamer-menu>
    <webrtc-streamer-algo id="algo"></webrtc-streamer-algo>
    <webrtc-streamer id="stream"></webrtc-streamer>
    <webrtc-streamer-options id="options" options="rtptransport=tcp&timeout=60&width=0&height=0&bitrate=0&rotation=0" style="display:none"></webrtc-streamer-options>
    <webrtc-streamer-footer></webrtc-streamer-footer>

    <script>
        customElements.whenDefined('webrtc-streamer').then(() => {
            let selectorElement = document.getElementById("selector");
            let streamElement = document.getElementById("stream");
            let optionsElement = document.getElementById("options");
            let algoElement = document.getElementById("algo");

            let url;
            if (typeof URLSearchParams != 'undefined') {
                var params = new URLSearchParams(location.search);
                if (params.has("options")) {
                    streamElement.setAttribute('options', params.get("options"));
                }
                if (params.has("algo")) {
                    algoElement.setAttribute('selected', params.get("algo"));
                    streamElement.setAttribute('algo', params.get("algo"));
                }            
                if (params.has("video") || params.has("audio")) {
                    url = { video:params.get("video"), audio:params.get("audio") };
                }
                if (params.has("showoptions")) {
                    optionsElement.style.display = "block";
                }
            }

            selectorElement.addEventListener('init', (event) => {
                    if (url) {
                        let media = JSON.stringify(url)
                        selectorElement.setAttribute('selected', media);
                        streamElement.setAttribute('url', media);
                    } else {
                        let mediaList = event.detail;
                        if (mediaList.length > 0) {
                            var random = mediaList.sort(() => .5 - Math.random());
                            let media = JSON.stringify(random[0])
                            selectorElement.setAttribute('selected', media);
                            streamElement.setAttribute('url', '');
                            streamElement.setAttribute('options', optionsElement.getAttribute('options'));
                            streamElement.setAttribute('url', media);
                        }
                    }
                });            
            

            selectorElement.addEventListener('change', (event) => {
                streamElement.setAttribute('url', '');
                streamElement.setAttribute('options', optionsElement.getAttribute('options'));
                streamElement.setAttribute('url', event.detail.url);
            });

            selectorElement.addEventListener('settings', (event) => {
                optionsElement.style.display = event.detail === "on" ? "block" : "none";
            });

            algoElement.addEventListener('change', (event) => {
                streamElement.setAttribute('algo', event.detail.algo);
            });

            optionsElement.addEventListener('change', (event) => {
                streamElement.setAttribute('options', event.detail.options);
            });

            streamElement.addEventListener('click', (event) => {
                const url = JSON.parse(streamElement.getAttribute('url'))
                const options = streamElement.getAttribute('options')
                window.open('./webrtc-streamer.html?video='+encodeURIComponent(url.video)+'&audio='+encodeURIComponent(url.audio)+"&options="+encodeURIComponent(options));
            });
            
        });        
        </script>
</body>
</html>

